<template>
  <div ref="graphWrapRef" style="height:300px;position: relative;">
    <h2>我的第二个mxgraph</h2>
    <div id="graphcontainer2" ref="graphcontainer2" class="graphWrap graph-edit"></div>
    <div id="graphcontainer2-2" ref="graphcontainer2-2" class="graphWrap2 graph-edit"></div>
  </div>
</template>

<script>
import _ from "lodash";
import mxgraph from '@/utils/mxgraph'
const { mxEvent, mxRubberband, mxGraph, mxConstants, mxGraphModel, mxClient, mxUtils } = mxgraph
const MxGraph = mxGraph
const MxRubberband = mxRubberband
const MxGraphModel = mxGraphModel

export default {

  data() {
    return {

    }
  },
  mounted() {
    this.initExample()
    this.init()

  },
  methods: {
    init() {
      // 
      var container = document.getElementById('graphcontainer2-2')
      mxEvent.disableContextMenu(container)
      const model = new MxGraphModel()
      const graph = new MxGraph(container, model)
      graph.setTooltips(true);

      // Enables rubberband selection
      new MxRubberband(graph)

      // Gets the default parent for inserting new cells. This
      // is normally the first child of the root (ie. layer 0).
      var parent = graph.getDefaultParent()
      this.initStyle(graph)

      // Adds cells to the model in a single step
      graph.getModel().beginUpdate()
      try {
        var start = graph.insertVertex(parent, null, 'start', 20, 20, 75, 75,'fillColor=red')
        var bill = graph.insertVertex(parent, null, 'bill', 180, 20, 75, 75,'bill')
        var check = graph.insertVertex(parent, null, 'check', 350, 20, 75, 75,'check')
        var end = graph.insertVertex(parent, null, 'end', 500, 20, 75, 75,'end')
        graph.insertEdge(parent, null, '', start, bill)
        graph.insertEdge(parent, null, '', bill, check)
        graph.insertEdge(parent, null, '', check, end)
      } finally {
        // Updates the display
        graph.getModel().endUpdate()
      }
    },
    initStyle(graph) {
      var vStyle = graph.getStylesheet().getDefaultVertexStyle()

      var style = _.cloneDeep(vStyle)
      style[mxConstants.STYLE_FONTSIZE] = '12'
      style[mxConstants.STYLE_FONTCOLOR] = 'black'
      style[mxConstants.STYLE_STROKECOLOR] = 'black'
      style[mxConstants.STYLE_FILLCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENTCOLOR] = 'white'
      style[mxConstants.STYLE_GRADIENT_DIRECTION] = mxConstants.DIRECTION_EAST
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = true
      style[mxConstants.STYLE_FONTSTYLE] = 1
      style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_LABEL
      style[mxConstants.STYLE_STROKECOLOR] = 'white'
      style[mxConstants.STYLE_ROUNDED] = true
      style[mxConstants.STYLE_SHADOW] = false
      style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE_ALIGN] = mxConstants.ALIGN_CENTER
      style[mxConstants.STYLE_IMAGE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP
      style[mxConstants.STYLE_IMAGE] = '/images/start.png'
      style[mxConstants.STYLE_IMAGE_WIDTH] = '40'
      style[mxConstants.STYLE_IMAGE_HEIGHT] = '40'
      style[mxConstants.STYLE_SPACING_TOP] = '50'
      style[mxConstants.STYLE_SPACING] = '8'
      const styleList = [
        { cguid: 'start', imgUrl: '/images/start.png' },
        { cguid: 'bill', imgUrl: '/images/bill.png' },
        { cguid: 'check', imgUrl: '/images/check.png' },
        { cguid: 'end', imgUrl: '/images/end.png' }
      ]
      for (var i = 0; i < styleList.length; i++) {
        const item = styleList[i]
        const newStyle = _.cloneDeep(style)
        newStyle[mxConstants.STYLE_IMAGE] = item.imgUrl
        graph.getStylesheet().putCellStyle(item.cguid, newStyle)
      }

    },
    initExample() {
      var container = document.getElementById('graphcontainer2')

      // Checks if the browser is supported
      if (!mxClient.isBrowserSupported()) {
        // Displays an error message if the browser is not supported.
        mxUtils.error('Browser is not supported!', 200, false);
      }
      else {
        // Creates the graph inside the given container
        var graph = new mxGraph(container);

        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        var parent = graph.getDefaultParent();

        // 修改图片的位置
        var prefix = 'shape=image;image=/images/keys.png;';

        // Adds cells to the model in a single step and set the vertex
        // label positions using the label position styles. Vertical
        // and horizontal label position styles can be combined.
        // Note: Alternatively, vertex labels can be set be overriding
        // mxCellRenderer.getLabelBounds.
        graph.getModel().beginUpdate();
        try {
          graph.insertVertex(parent, null, 'Bottom', 60, 60, 60, 60,
            prefix + 'verticalLabelPosition=bottom;verticalAlign=top');
          graph.insertVertex(parent, null, 'Top', 140, 60, 60, 60,
            prefix + 'verticalLabelPosition=top;verticalAlign=bottom');
          graph.insertVertex(parent, null, 'Left', 60, 160, 60, 60,
            prefix + 'labelPosition=left;align=right');
          graph.insertVertex(parent, null, 'Right', 140, 160, 60, 60,
            prefix + 'labelPosition=right;align=left');
        }
        finally {
          // Updates the display
          graph.getModel().endUpdate();
        }
      }
    }
  },
}
</script>
<style scoped>
.graphWrap {
  position: relative;
  overflow: hidden;
  width: 321px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
  float: left;
}
.graphWrap2 {
  position: relative;
  overflow: hidden;
  width: 621px;
  height: 241px;
  cursor: default;
  border: 1px solid grey;
  float: right;
}
.graph-edit {
  background: url("/images/grid.gif");
}
.graph-browse {
  background: none;
}
</style>


